<template>
  <div>
    <div class="ba_f outmain">
      <div class="shuju_title">
        <div class="shuju_title_text">
          <span>筛选条件</span>
        </div>
      </div>
      <el-form :inline="false" :model="form" class="demo-form-inline" label-width="100px">
        <div class="flex ba_f">
          <el-form-item label="查询日期：" class="mar_t20">
            <div class="flex-bet">
              <div>
                <el-radio-group v-model="form.timeType" @change="selectType">
                  <el-radio-button label="1">今天</el-radio-button>
                  <el-radio-button label="2">近七天</el-radio-button>
                  <el-radio-button label="3">近十五天</el-radio-button>
                  <el-radio-button label="4">自定义时间</el-radio-button>
                </el-radio-group>
                <span class="mar_l20" v-if="form.timeType=='4'">
                <el-date-picker v-model="form.time" type="daterange" range-separator="至" start-placeholder="开始日期"
                                end-placeholder="结束日期" format="yyyy年MM月dd日" :picker-options="pickerOptions"  @change="selectType"></el-date-picker>
              </span>
              </div>
            </div>
          </el-form-item>
        </div>
        <div class="flex ba_f">
          <el-form-item label="选择店铺：">
            <div class="">
              <el-select v-model="form.shopValue" placeholder="请选择" @change="changeStore">
                <el-option v-for="item in options" :key="item.id" :label="item.name+'(ID:'+item.id+')'"
                           :value="item.id"></el-option>
              </el-select>
            </div>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="mar_t20">
      <div class="mar_t20 flex-bet">
        <div class="flex-g-1 ba_f pad_20 bor_rad5">
          <div class="shuju_title">
            <div class="shuju_title_text">
              <span>订单渠道</span>
            </div>
          </div>
          <div id="mainEch32" class="mar_r20" style="height: 280px;width:580px;margin-top: 40px"></div>
        </div>
        <!--        <div class="flex-g-1 ba_f mar_lr20 pad_20 bor_rad5">-->
        <!--          <div class="shuju_title">-->
        <!--            <div class="shuju_title_text">-->
        <!--              <span>订单渠道</span>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--          <div id="mainEch33" class="mar_r20" style="height: 280px;width:380px;margin-top: 40px"></div>-->
        <!--        </div>-->
        <div class="flex-g-1 ba_f pad_20 bor_rad5 mar_l20">
          <div class="shuju_title">
            <div class="shuju_title_text">
              <span>支付占比</span>
            </div>
          </div>
          <div id="mainEch34" class="mar_r20" style="height: 280px;width:580px;margin-top: 40px"></div>
        </div>
      </div>
    </div>
    <div class="mar_t20 ba_f outmain">
      <div class="shuju_title">
        <div class="shuju_title_text">
          <span>支付占比</span>
        </div>
        <!--                <div class="fon_12 ab r0 mar_r10 color_9">更新时间：2020-09-04 13:32:59</div>-->
      </div>
      <div class="main-icon flex t_l mar_t20">
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="title6 fon_14">营业总额</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ jeData.allMoney || 0 }}</p>
              <p class="fon_12 title6 lh25"><span class="mar_r10">总订单数：{{ jeData.all  || 0 }}</span></p>
              <p class="fon_12 title6 lh25 yc">支付金额数</p>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="title6 fon_14">微信支付金额</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ jeData.weChatPayMoney || 0 }}</p>
              <p class="fon_12 title6 lh25"><span class="mar_r10">订单数：{{ jeData.weChatPay || 0  }}</span></p>
              <p class="fon_12 title6 lh25">支付占比：{{ jeData.weChatPayProportion || 0 }}%</p>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="title6 fon_14">支付宝支付金额</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ jeData.aliPayMoney || 0 }}</p>
              <p class="fon_12 title6 lh25"><span class="mar_r10">订单数：{{ jeData.aliPay || 0  }}</span>
              </p>
              <p class="fon_12 title6 lh25">支付占比：{{ jeData.aliPayProportion || 0 }}%</p>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="title6 fon_14">余额支付金额</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ jeData.balancePayMoney || 0 }}</p>
              <p class="fon_12 title6 lh25"><span class="mar_r10">订单数：{{ jeData.balancePay || 0  }}</span>
                </p>
              <p class="fon_12 title6 lh25">支付占比：{{ jeData.balancePayProportion || 0 }}%</p>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 borderBG">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="title6 fon_14">货到付款支付金额</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ jeData.onDeliveryMoney || 0 }}</p>
              <p class="fon_12 title6 lh25 color_f"><span class="mar_r10">订单数：{{ jeData.onDelivery  || 0 }}</span></p>
              <p class="fon_12 title6 lh25">支付占比：{{ jeData.onDeliveryProportion || 0 }}%</p>
            </div>
          </div>
        </div>
      </div>
      <div id="zhentiEch2" style="height: 360px;" class="mar_t20"></div>
    </div>
    <div class="mar_t20 pad_20 ba_f outmain">
      <div class="shuju_title">
        <div class="shuju_title_text">
          <span>支付概况</span>
        </div>
      </div>
      <div class="mar_t20 flex-bet">
        <div class="flex-g-1 ba_f">
          <div class="mar_t10 shuju_table">
            <el-table :data="tableData" stripe style="width: 100%" class="tablecenter">
              <el-table-column prop="time" label="日期" width="160"></el-table-column>
              <el-table-column prop="completeCount" label="已完成/总订单数">
                <template slot-scope="scope">
                  <div class="">
                    {{scope.row.completeCount}}/{{scope.row.count}}
                  </div>
                </template>
              </el-table-column>
<!--              <el-table-column prop="takeOutCount" label="外卖订单" width="120"></el-table-column>-->
<!--              <el-table-column prop="self" label="自提订单" width="120"></el-table-column>-->
              <el-table-column prop="money" label="微信支付订单数/支付金额/占比">
                <template slot-scope="scope">
                  <div class="flex-center">
                   {{scope.row.weChatPayCount}}/{{scope.row.weChatPayMoney}}/{{NumberDiv(+scope.row.weChatPayMoney,+scope.row.money) }}%
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="money" label="支付宝支付订单数/支付金额/占比">
                <template slot-scope="scope">
                  <div class="flex-center">
                    {{scope.row.aliCount}}/{{scope.row.aliPayMoney}}/{{NumberDiv(+scope.row.aliPayMoney,+scope.row.money) }}%
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="money" label="余额支付订单数/支付金额/占比">
                <template slot-scope="scope">
                  <div class="flex-center">
                    {{scope.row.balancePayCount}}/{{scope.row.balancePayMoney}}/{{NumberDiv(+scope.row.balancePayMoney,+scope.row.money) }}%
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="money" label="货到付款订单数/支付金额/占比">
                <template slot-scope="scope">
                  <div class="flex-center">
                    {{scope.row.onDeliveryCount}}/{{scope.row.onDeliveryMoney}}/{{NumberDiv(+scope.row.onDeliveryMoney,+scope.row.money) }}%
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="money" label="总订单数/总支付金额">
                <template slot-scope="scope">
                  <div class="flex-center">
                    {{scope.row.count}}/{{scope.row.money}}
                  </div>
                </template>
              </el-table-column>
            </el-table>
<!--            <el-pagination background layout="prev, pager, next" :total="page.total" :page-size="page.pagesize"-->
<!--                           :current-page.sync="page.currentPage" @current-change="handleCurrentChange"></el-pagination>-->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts';
import {takeOutIndexPay} from '@/api/statistics';
import {changeDate} from '@/utils/index';
import {mapState} from 'vuex';

export default {
  mounted() {
    this.bus.$emit('loading', true);
    this.init();
    // this.mainEch32()
    // this.mainEch33()
    // this.mainEch34()
    window.addEventListener('resize', this.initchart);
  },
  created() {
    this.form.shopValue = this.market[0].id;
    this.options = this.market;
  },
  data() {
    return {
      formInline: {
        timeType: '1',
      },
      selectData:'',
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.selectData = minDate.getTime()
          if (maxDate) {
            this.selectData = ''
          }
        },
        disabledDate: (time) => {
          if (!this.isNull(this.selectData)) {
            var date = new Date(this.selectData)
            return date.getMonth() > new Date(time).getMonth() || date.getMonth() < new Date(time).getMonth()
          } else {
            return false
          }
        }
      },
      page: {
        total: 0,
        size: 10,
        currentPage: 1
      },
      zhData: {},
      jeData: {},
      jyData: {},
      form: {
        shopValue: '',
        timeType: '1',
        time: [new Date(), new Date()],
        Mtime: ''
      },
      options: [
        {
          value: '1',
          label: '全部'
        }
      ],
      options2: [
        {
          value: '1',
          label: '自然日'
        }
        // {
        //     value: '2',
        //     label: '自然月'
        // }
      ],
      tableData: [],
      tableData2: [],
      echarts1_option: {
        color: ['#4284ED', '#42CCF0'],
        tooltip: {
          trigger: 'axis'
        },
        // tooltip: {
        //     trigger: 'axis',
        //     formatter: (params)=> {
        //         // console.log(params,666)
        //         var time ='时间：'+ (Number(params[0].name)-1)+':00' +'~'+ Number(params[0].name)+':00';
        //         for(var i=0 ; i < params.length;i++){
        //             var numbers = '</br>' +params[i].seriesName+ '：'+params[i].value;
        //             time+=numbers
        //         }
        //         return time
        //     }
        // },
        legend: {
          data: ['营业额']
        },
        grid: {
          left: '3%',
          right: '5%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          // 去除坐标轴上的刻度线
          axisTick: {
            show: false,
            lineStyle: {
              color: '#ccc',
              type: 'dashed'
            }
          },
          // x轴的字体样式
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333',
              fontSize: '12'
            }
          },
          // x轴的颜色和宽度
          axisLine: {
            lineStyle: {
              color: '#f7f7f7',
              width: 2 //这里是坐标轴的宽度,可以去掉
            }
          },
          data: []
        },
        yAxis: {
          type: 'value',
          axisTick: {
            //y轴刻度线
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333',
              fontSize: '12'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dotted',
              color: '#DDDDDD'
            },
            show: true
          }
        },
        series: [
          {
            name: '营业额',
            type: 'bar',
            data: []
          }
        ]
      },
      echarts4_option: {
        color: ['#4284ED', '#42CCF0', '#1890FF', '#2FC25B', '#4284ED'],
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['微信支付金额', '支付宝支付金额', '余额支付金额', '货到付款金额']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          // 去除坐标轴上的刻度线
          axisTick: {
            show: false,
            lineStyle: {
              color: '#ccc',
              type: 'dashed'
            }
          },
          // x轴的字体样式
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333',
              fontSize: '12'
            }
          },
          // x轴的颜色和宽度
          axisLine: {
            lineStyle: {
              color: '#f7f7f7',
              width: 2 //这里是坐标轴的宽度,可以去掉
            }
          },
          data: []
        },
        yAxis: {
          type: 'value',
          axisTick: {
            //y轴刻度线
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333',
              fontSize: '12'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dotted',
              color: '#DDDDDD'
            },
            show: true
          }
        },
        series: [
          {
            name: '微信支付金额',
            type: 'line',
            stack: '总量',
            smooth: true,
            data: []
          },
          {
            name: '支付宝支付金额',
            type: 'line',
            stack: '总量',
            smooth: true,
            data: []
          },
          {
            name: '余额支付金额',
            type: 'line',
            stack: '总量',
            smooth: true,
            data: []
          },
          {
            name: '货到付款金额',
            type: 'line',
            stack: '总量',
            smooth: true,
            data: []
          },
        ]
      },
      echarts32_option: {
        color: ['#5654F5', '#4CA8FF', '#4EC478', '#FBA33F', '#EBA675'],
        tooltip: {
          trigger: 'item',
          // formatter:function(data){ return data.percent.toFixed(2);}
        },
        legend: {
          orient: 'vertical',
          right: 0,
          data: ['外卖订单金额', '外卖自提订单金额']
        },
        series: [
          {
            name: '支付金额',
            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 35.00, name: '外卖订单金额'},
              {value: 20.00, name: '外卖自提订单金额'},
            ],
          }
        ]
      },
      echarts33_option: {
        color: ['#5654F5', '#4CA8FF', '#4EC478', '#FBA33F', '#EBA675'],
        tooltip: {
          trigger: 'item',
          // formatter:function(data){ return data.percent.toFixed(2);}
        },
        legend: {
          orient: 'vertical',
          right: 0,
          data: ['外卖订单', '外卖自提订单', '当面付订单']
        },
        series: [
          {
            name: '支付金额',
            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 35.00, name: '外卖订单'},
              {value: 20.00, name: '外卖自提订单'},
              {value: 20.00, name: '当面付订单'},
            ],
          }
        ]
      },
      echarts34_option: {
        color: ['#5654F5', '#4CA8FF', '#4EC478', '#FBA33F', '#EBA675'],
        tooltip: {
          trigger: 'item',
          // formatter:function(data){ return data.percent.toFixed(2);}
        },
        legend: {
          orient: 'vertical',
          right: 0,
          data: ['微信支付金额', '支付宝支付金额', '余额支付金额', '货到付款金额']
        },
        series: [
          {
            name: '支付金额',
            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 35.00, name: '微信支付金额'},
              {value: 20.00, name: '支付宝支付金额'},
              {value: 20.00, name: '余额支付金额'},
              {value: 20.00, name: '货到付款金额'},
            ],
          }
        ]
      },
    };
  },
  computed: {
    ...mapState(['market'])
  },
  methods: {
    init() {
      this.realRecord();
    },
    initchart() {
      let myChart2 = echarts.init(document.getElementById('zhentiEch'));
      myChart2.resize();
    },
    async realRecord() {
      var params = {
        storeId: this.form.shopValue,
        timeType: this.form.timeType,
        startTime: this.form.timeType == '4' && this.form.time ? changeDate(this.form.time[0]).substr(0,10) : '',
        endTime: this.form.timeType == '4' && this.form.time ? changeDate(this.form.time[1]).substr(0,10) : '',
      };
      const {data} = await takeOutIndexPay(params);
      if (data) {
        this.jeData = data;
        this.tableData = data.timeArr;
        this.echarts4_option.series[0].data = data.weChatPayArr.map((item) => item.money);
        this.echarts4_option.series[1].data = data.aliPayArr.map((item) => item.money);
        this.echarts4_option.series[2].data = data.balancePayArr.map((item) => item.money);
        this.echarts4_option.series[3].data = data.onDeliveryArr.map((item) => item.money);
        this.echarts4_option.xAxis.data = data.weChatPayArr.map((item) => item.hours);
        this.zhentiEch2();
        this.echarts32_option.series[0].data[0].value = +data.delivery;
        this.echarts32_option.series[0].data[1].value = +data.self;
        this.mainEch32()
        this.echarts34_option.series[0].data[0].value = +data.weChatPayMoney;
        this.echarts34_option.series[0].data[1].value = +data.aliPayMoney;
        this.echarts34_option.series[0].data[2].value = +data.balancePayMoney;
        this.echarts34_option.series[0].data[3].value = +data.onDeliveryMoney;
        this.mainEch34()
        this.bus.$emit('loading', false);
      }
    },
    mainEch32() {
      let myChart = echarts.init(document.getElementById('mainEch32'))
      myChart.setOption(this.echarts32_option, true)
    },
    mainEch33() {
      let myChart = echarts.init(document.getElementById('mainEch33'))
      myChart.setOption(this.echarts33_option, true)
    },
    mainEch34() {
      let myChart = echarts.init(document.getElementById('mainEch34'))
      myChart.setOption(this.echarts34_option, true)
    },
    zhentiEch2() {
      let myChart = echarts.init(document.getElementById('zhentiEch2'));
      myChart.setOption(this.echarts4_option, true);
    },
    selectType(){
      this.init()
    },
    changeTime() {
      this.realRecord();
    },
    changeStore() {
      this.realRecord();
    },
    isNull(value) {
      if (value) {
        return false
      }
      return true
    },
    NumberDiv(arg1,arg2){
      // console.log(arg1,arg2)
      if(arg1<=0 || arg2<=0 ){
        return 0
      }
      return (Math.round(arg1/arg2 * 10000) / 100.00)
    },
  }
};
</script>
<style lang="scss" scoped>
.title6 {
  color: #666;
  font-size: 14px;
}

.title35 {
  color: #353535;
}

.tongji_icon {
  width: 40px;
  height: 40px;
  font-size: 20px;
}
</style>
